<template>
  <div class="container">
    <div class="stu-appli-title">
      <span></span>
      <span>我的申请</span>
    </div>
    <!-- 申请卡片 -->
    <div class="stu-appli-content" v-for="(item, index) in tableData" :key="index">
      <span><img src="~images/common/student_avatar.png" /></span>
      <span>{{staffBase.staff_name}}</span>
      <span><img class="tel-icon" src="~images/common/stu_tel.png" /></span>
      <span>{{staffBase.staff_tel | formateEmpty}}</span>
      <span>{{staffBase.class_year}}{{staffBase.class_name}} 负责老师</span>
      <span>申请事假</span>
      <span>{{item.start_time | formateTime}} ~ {{item.end_time | formateTime}} </span>
      <span>{{item.start_time | formateTime}} 提交</span>
      <span> {{item.desc}}</span>
      <span>待审批</span>
      <span> <img  src="~images/common/confirm_active.png" /></span>
      <span><img  src="~images/common/confirm.png" /></span>
      <ul class="dashed-line">
        <li class="line-i"></li>
        <li class="line-i"></li>
        <li class="line-i"></li>
        <li class="line-i"></li>
      </ul>
    </div>
    <!-- 无数据 -->
    <div class="no-data-bg" v-show="tableData.length < 1">
      <van-empty description="暂无请假" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default:()=> [],
    },
  },
  data() {
    return {
      staffBase: {},
      roommateData: {},
      collegeTeacher: {},
    }
  },
  created() {
    this.getStudentInfo()
  },
  methods: {
    getStudentInfo() {
      /*
      * 获取学生基本信息
      * @param{staff_id}
      * TODO: 学生id未获取
      */
      this.$api.student.getStudentInfo({ staff_id: '2' }).then(res=> {
        const { collegeTeacher, roommateData, staff_base } = res.data
        this.collegeTeacher =collegeTeacher
        this.roommateData = roommateData
        this.staffBase = staff_base
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  margin: 15px;
  position: relative;
  .stu-appli-title {
    span {
      &:first-child {
        position: absolute;
        top: 2px;
        left: 11px;
        width: 4px;
        height: 12px;
        background: #136FD1;
      }
      &:last-child {
        position: absolute;
        top: 0;
        left: 25px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #002170;
      }
    }
  }
  .stu-appli-content {
    position: relative;
    top: 25px;
    width: 345px;
    height: 200px;
    margin-bottom: 10px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.09);
    border-radius: 5px;
    border-bottom: 6px solid #136FD1;
    span {
      &:first-child {
        position: absolute;
        top: 19px;
        left: 20px;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border: 1px dashed #8C97B2;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &:nth-child(2) {
        position: absolute;
        top: 21px;
        left: 67px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #002170;
      }
      &:nth-child(3) {
        position: absolute;
        top: 19px;
        left: 208px;
        width: 16px;
        height: 16px;
        display: grid;
        place-items: center;
        border: 1px dashed #8C97B2;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &:nth-child(4) {
        position: absolute;
        top: 20px;
        left: 232px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #48DBBB;
      }
      &:nth-child(5) {
        position: absolute;
        top: 43px;
        left: 67px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8C97B2;
      }
       &:nth-child(6) {
        position: absolute;
        top: 80px;
        left: 42px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #002170;
       }
       &:nth-child(7) {
        position: absolute;
        top: 80px;
        right: 24px;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #136FD1;
       }
       &:nth-child(8) {
        position: absolute;
        top: 102px;
        left: 42px;
        font-size: 12px;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #8C97B2;

       }
       &:nth-child(9) {
        position: absolute;
        top: 102px;
        right: 24px;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2A529F;
       }
       &:nth-child(10) {
        position: absolute;
        bottom: 50px;
        left: 42px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #8C97B2;
       }
       &:nth-child(11) {
        position: absolute;
        top: 82px;
        left: 24px;
        display: grid;
        place-items: center;
        width: 10px;
        height: 10px;
        img {
          width: 100%;
          height: 100%;
        }
       }
       &:nth-child(12) {
        position: absolute;
        left: 24px;
        bottom: 52px;
        display: grid;
        place-items: center;
        width: 10px;
        height: 10px;
        img {
          width: 100%;
          height: 100%;
        }
       }
    }
    .dashed-line {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 92px;
      left: 27px;
      width: 40px;
      .line-i {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background-color: #d8dde6;
        margin: 3px 0;
      }
    }
  }
}
</style>